<template>

    <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px;">
        <el-form-item :label="lableTitle" class="one-label">
            <!-- 参数 -->
            <div class="span-bar">
                <div class="flex">
                    <span class="short-input-4 mar-r-10 font-14 font-gray">参数名称</span>
                    <span class="font-14 font-gray">参数值</span>
                </div>
                <div class="flex pad-b-22" v-for="(parameter,index) in form.goodsParameters" :key="index">
                    <el-input v-model="parameter.parameterName" placeholder="输入参数名称" class="short-input-2 mar-r-10"
                        maxlength="30" />
                    <el-input v-model="parameter.parameterValue" placeholder="输入参数值" class="long-input-3 mar-r-10"
                        maxlength="250" />
                    <el-button class="remove-btn" @click="delParameter(parameter,index)">
                        <svg-icon class="font-16 font-w" icon-class="del" />
                    </el-button>
                </div>
                <el-button @click="addParameter()">
                    <svg-icon class="font-w mar-r-3" icon-class="add" /> 添加参数
                </el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
    import {
      pageGetPropertyList
    } from '@/api/goods/enterpriseGoodsCategory'
    
    export default {
      directives: {},
      props: {},
      data() {
        return {
          form: {
            goodsParameters: [],
            supplierGoodsId: ''
          },
          // 左侧标题名称
          lableTitle: '参数设置',
          rules: {}
        }
      },
      // 初始化页面
      created() {
        this.initGoodsEdit()
      },
      methods: {
        initGoodsEdit() {
          const that = this
          this.$bus.$on('goods.edit.data', function(data) {
            that.form.goodsParameters = that.$utils.isExist(data.goodsParameters) ? data
              .goodsParameters : []
            that.form.supplierGoodsId = data.supplierGoodsId
          })
          this.$bus.$on('goods.edit.categoryId', function(categoryId) {
            if (!categoryId || categoryId === undefined || that.form.supplierGoodsId) {
              return
            }
            pageGetPropertyList({
              categoryId: categoryId
            }).then(response => {
              if (response.isError) return
              that.form.goodsParameters = []
              response.data.records.forEach(p => {
                if (p.propertyType === 1) {
                  const obj = {
                    parameterName: p.propertyName,
                    parameterValue: p.propertyValue
                  }
                  that.form.goodsParameters.push(obj)
                }
              })
            })
          })
        },
        addParameter() {
          const obj = {
            parameterName: '',
            parameterValue: ''
          }
          this.form.goodsParameters.push(obj)
        },
        // 删除参数
        delParameter(parameter, index) {
          const goodsParameters = this.form.goodsParameters
          goodsParameters.splice(index, 1)
          this.form.goodsParameters = goodsParameters
        },
        checkForm() {}
      }
    }
</script>

<style lang="less" scoped>
    .span-bar {
        padding: 0 50px;
        float: left;
    }

    .remove-btn {
        padding: 7px 6px !important;
    }

    .long-input {
        width: 80%;
    }

    .long-input-2 {
        width: 55%;
        margin-right: 5%;
    }

    .long-input-3 {
        width: 55%;
    }

    .short-input {
        width: 20%;
    }

    .short-input-2 {
        width: 30%;
    }

    .default-input {
        width: 50%;
    }

    .tips {
        color: gray;
        font-size: 12px;
        line-height: 1.2;
        padding-top: 5px;
    }

    .picture {
        width: 130px;
        height: 130px;
        display: block;
    }

    .pic-bar {
        position: relative;

        .close-icon {
            position: absolute;
            right: -30px;
            top: -11px;
            width: 31px;
            height: 40px;
            padding: 0 7px;
            cursor: pointer;
        }

        span {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            display: block;
            color: #fff;
            text-align: center;
            padding: 3px 0;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }
    }

    .pic-add {
        background: #fff;
        border: #d3d3d3 1px dashed;
        border-radius: 5px;
        padding: 0 45px;
    }
</style>
